<script lang="ts" setup>
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { requestVideoCategory, requestVideoTagList, requestAllVideo, requestTagVideo } from '../../../utils/axiosURL'

// 九项视频分配数据
let videoCategory = reactive<any>([])
// 更多视频分类容器的显示状态
let moreCateShowWrapState = ref<boolean>(false)
// 存储所有视频的标签列表
let allVideoTagList = reactive<any>([])
// 默认的标签及分类
let defaultTag = ref<string>('全部视频')
// 需要渲染的视频数据列表
let needRenderVideoData = reactive<any>([])
// 请求视频页码
let requestVideoPage = ref<number>(0)
// 标签ID
let tagID = ref<number>(0)

// 点击右侧九项分类的事件处理函数
const clickRightFn = (name: string, id: number) => {
  defaultTag.value = name
  tagID.value = id
}
const rightTagCateFn = (name: string, id: number) => {
  defaultTag.value = name
  tagID.value = id
}


// 请求视频分类
const requestVideoCategoryFn = () => {
  requestVideoCategory().then(({ data }: any) => {
    videoCategory.values = data
  }).catch(_ => { })
}

// 请求所有视频标签列表
const requestVideoTagListFn = () => {
  requestVideoTagList().then(({ data }: any) => {
    allVideoTagList.values = data
  }).catch(_ => { })
}

// 请求所有视频
const requestAllVideoFn = () => {
  requestAllVideo(requestVideoPage.value).then((data: any) => {
    needRenderVideoData.values = data.datas
  }).catch(_ => { })
}

const load = () => {
  if (defaultTag.value === '全部视频') {
    requestVideoPage.value += 1
    requestAllVideo(requestVideoPage.value).then((data: any) => {
      needRenderVideoData.values = [...needRenderVideoData.values, ...data.datas]
    }).catch(_ => { })
  } else {
    requestVideoPage.value += 1
    requestTagVideo(tagID.value, requestVideoPage.value).then((data: any) => {
      needRenderVideoData.values = [...needRenderVideoData.values, ...data.datas]
    }).catch(_ => { })
  }
}

onMounted(() => {
  requestVideoCategoryFn()
  requestVideoTagListFn()
  requestAllVideoFn()
})

watch([defaultTag, tagID], () => {
  if (defaultTag.value === '全部视频') {
    requestVideoPage.value = 0
    needRenderVideoData.values = []
    requestAllVideo(requestVideoPage.value).then((data: any) => {
      needRenderVideoData.values = [...needRenderVideoData.values, ...data.datas]
    }).catch(_ => { })
  } else {
    requestVideoPage.value = 0
    needRenderVideoData.values = []
    requestTagVideo(tagID.value, requestVideoPage.value).then((data: any) => {
      needRenderVideoData.values = [...needRenderVideoData.values, ...data.datas]
    }).catch(_ => { })
  }
})

window.addEventListener('click', () => moreCateShowWrapState.value = false)
onUnmounted(() => { window.removeEventListener('click', () => { }) })
</script>

<template>
  <div class="videoWrap">
    <div class="TopCateWrap" v-if="videoCategory.values.length">
      <div class="leftCateWrap" @click.stop="() => moreCateShowWrapState = !moreCateShowWrapState">
        <span>{{ defaultTag }}</span>
        <span class="iconfont icon-xiangyoujiantou"></span>
      </div>
      <div class="moreCateWrap" v-if="moreCateShowWrapState">
        <div class="allVideo">
          <p class="textAllVideo" :class="'全部视频' === defaultTag ? 'active' : ''" @click="() => defaultTag = '全部视频'">全部视频
          </p>
        </div>
        <div class="otherWrap">
          <div class="moreItem" v-for="item in allVideoTagList.values" :class="item.name === defaultTag ? 'active' : ''"
            @click="clickRightFn(item.name, item.id)">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="rightCateList">
        <ul>
          <li v-for="item in videoCategory.values" :class="item.name === defaultTag ? 'active' : ''"
            @click="rightTagCateFn(item.name, item.id)">{{ item.name }}</li>
        </ul>
      </div>
    </div>
    <el-skeleton v-else :rows="1" />
    <div class="videoItemWrap" v-infinite-scroll="load">
      <VideoItem v-if="needRenderVideoData.values.length" v-for="item in needRenderVideoData.values"
        :name="item.data.title" :imgurl16v9="item.data.coverUrl" :duration="item.data.durationms"
        :playCount="item.data.previewDurationms" :id="item.data.vid" />
      <MVItemSkeleton v-else v-for="item in 15" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.videoWrap {
  width: 100%;

  .TopCateWrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    padding-right: 30px;
    box-sizing: border-box;

    .leftCateWrap {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-basis: 100px;
      width: 100px;
      height: 30px;
      border-radius: 25px;
      border: 1px solid $lineColor;
      font-size: $font-size-sm;
      font-family: $textFont;

      .icon-xiangyoujiantou {
        margin-top: 3px;
      }

      &:hover {
        background-color: rgb(242, 242, 242);
      }
    }

    .rightCateList {
      flex: 1;
      height: 100%;

      ul {
        display: flex;
        align-items: center;
        justify-content: end;
        width: 100%;
        height: 100%;

        li {
          margin-left: 10px;
          font-size: $font-size-sm;
          font-family: $textFont;
          border-radius: 25px;
          padding: 3px 10px;
          color: #888;
          cursor: pointer;

          &:hover {
            color: #000;
          }
        }
      }
    }

    .moreCateWrap {
      z-index: 1;
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 50px;
      right: 0;
      bottom: 0;
      left: 0;
      width: 650px;
      height: 500px;
      padding: 8px 0 0 8px;
      box-sizing: border-box;
      box-shadow: 0 0 7px -3px gray;
      border-radius: 8px;
      background-color: #fff;

      .allVideo {
        flex-basis: 60px;
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        padding-left: 15px;
        box-sizing: border-box;
        border-bottom: 1px solid $lineColor;

        .textAllVideo {
          width: fit-content;
          font-size: $font-size-xs;
          font-family: $textFont;
          color: $font_main_color;
          line-height: 30px;
          padding: 1px 10px;
          border-radius: 25px;

          &:hover {
            color: $font_red_color;
          }
        }
      }

      .otherWrap {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        padding: 20px;
        box-sizing: border-box;
        overflow: auto;

        .moreItem {
          width: 105px;
          height: 35px;
          margin: 0 14px 14px 0;
          line-height: 35px;
          text-align: center;
          border-radius: 25px;
          font-size: $font-size-xs;
          font-family: $textFont;
          color: $font_main_color;

          &:hover {
            color: $font_red_color;
          }
        }
      }
    }
  }

  .videoItemWrap {
    display: flex;
    flex-wrap: wrap;
  }
}

.active {
  color: $font_red_color !important;
  background-color: rgb(253, 236, 236);
}
</style>
